﻿<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<style type="text/css">
		.lli{position:absolute;left:0;top:0;background:#4096ee;width:50px;height:35px;line-height:35px;z-index:99;}
		.lli li{float:left;padding:0 5px;}
	</style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px">
		
	</div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="../js/echarts-all.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main')); 
		var option = {
			tooltip: {
				show: true
			},
			legend: {
				data:['销量','热度'],
				selected: {
					'热度' : false
				},
			},
			xAxis : [
				{
					type : 'category',
					data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					"name":"销量",
					"type":"bar",
					"data":[5, 20, 40, 10, 10, 20],
					markPoint : {
						symbol: 'circle',
						data : [
							{xAxis: 2,y:50, value : "1asdf"},
							{xAxis: 1,y:50, value : "123"}
						],
						itemStyle : {
							normal : {
								label : {
									formatter : function(a,b,c,d){
										console.log(arguments);
										return a.value
									},
									textStyle: {
										color:"#000",
										align : "center"
									}
								}
							}
						}
					},
				},
				{
					"name":"热度",
					"type":"bar",
					"data":[50, 120, 240, 100, 102, 220]
				}
			]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option); 
		
		myChart.on("legendSelected",function(e){
			var option = myChart.getOption();
			
		})
    </script>
</body>